<template>
  <div class="connection-page">
    <Header />
    <div class="connection-wrap">
      <div class="connection-body">
        <div class="flex">
          <div class="connection-left-body">
            <div style="margin-left: 40px; padding-top: 31px">
              <div class="left-title">{{ connectionData.contact_title }}</div>
              <div class="contact-information white">
                <div class="flex align-center wd233">
                  <img src="@img/phone-icon.png" />
                  <div class="ml10 fs-14">
                    {{ connectionData.contact[0].value }}
                  </div>
                </div>
                <div class="flex align-center white mt32">
                  <img src="@img/mailbox-icon.png" />
                  <div class="ml10 fs-14 wd233">
                    {{ connectionData.contact[1].value }}
                  </div>
                </div>
                <div class="flex align-start white mt32">
                  <img src="@img/address-icon.png" />
                  <div class="ml10 fs-14 wd233">
                    {{ connectionData.contact[2].value }}
                  </div>
                </div>
              </div>
              <div class="medium-list">
                <div class="flex">
                  <a
                    class="platform-icon"
                    href="https://www.instagram.com/p/CgURF4asodF/?igsh=MXEwaGxteGsxcTUzbQ=="
                    target="_blank"
                  >
                    <img src="@img/ins.png" class="ins-icon" />
                  </a>
                  <a
                    class="platform-icon"
                    href="https://youtube.com/@mihunterscooter?si=u41IVufcNc_fU-jD"
                    target="_blank"
                  >
                    <img src="@img/youtube.png" class="youtube-icon" />
                  </a>
                </div>
              </div>
            </div>
          </div>
          <div class="connection-right-body">
            <div style="margin-left: 40px; padding-top: 31px">
              <div class="right-title">{{ connectionData.message.title }}</div>
              <div class="right-illustration">
                {{ connectionData.message.illustration }}
              </div>
              <div class="email-input">
                <div class="title-input">
                  {{ connectionData.message.email_title }}
                </div>
                <div>
                  <input
                    v-model="feedbackData.email"
                    type="text"
                    :placeholder="connectionData.message.eamil"
                  />
                </div>
              </div>
              <div class="message-input">
                <div class="title-input">
                  {{ connectionData.message.message_title }}
                </div>
                <div>
                  <textarea
                    v-model="feedbackData.context"
                    :placeholder="connectionData.message.message"
                  />
                </div>
              </div>
              <div class="submit-btn" @click="feedbackSend">
                {{ connectionData.message.send }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <Footer />
  </div>
</template>
<script setup>
import Footer from '@/components/Footer.vue'
import Header from '@/components/Header.vue'

const { footerData } = useData()
const { $apiFetch } = useNuxtApp()
const { state } = usePageData()

const connectionData = useState('connection-data', () => {})

const feedbackData = ref({
  email: '',
  context: '',
})

const { data, error } = await useAsyncData('connection-data', () =>
  $apiFetch(`/contact`, {
    method: 'GET',
    params: {
      lang: state.value.language,
    },
  }),
)

if (!error.value) {
  connectionData.value = data.value.data
}

const feedbackSend = async () => {
  const { email, context } = feedbackData.value
  const res = await $apiFetch(`/submit`, {
    method: 'POST',
    body: {
      email,
      context,
      lang: state.value.language,
    },
  })
  alert(res.message)
}

const contactData = computed(() => {
  const arr = []
  footerData.value[3]?.data?.map((v) => {
    arr.push(v.value)
  })
  return arr
})
</script>
<style lang="scss" scoped>
.right-illustration {
  font-weight: 500;
  font-size: 16px;
  color: rgba(0, 0, 0, 0.35);
  width: 300px;
  margin-top: 10px;
}
.submit-btn {
  width: 318px;
  height: 36px;
  background: #171a26;
  margin-top: 30px;
  color: #fff;
  font-size: 14px;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.message-input {
  margin-top: 24px;
  textarea {
    width: 300px;
    height: 119px;
    background: #ffffff;
    margin-top: 4px;
    font-size: 14px;
    padding-top: 7px;
    padding-left: 14px;
    color: #171a26;
    border: 2px solid #fff;
    &:focus {
      border-color: #171a26;
    }
  }
  textarea::placeholder {
    color: rgba(0, 0, 0, 0.35);
    font-size: 14px;
  }
}
.title-input {
  font-weight: bold;
  font-size: 16px;
  color: #171a26;
}
.email-input {
  margin-top: 40px;
  input {
    width: 300px;
    max-height: 36px;
    height: 30px;
    background: #ffffff;
    font-size: 14px;
    padding-left: 14px;
    margin-top: 4px;
    color: #171a26;
    border: 2px solid #fff;
    &:focus {
      border-color: #171a26;
    }
  }
}
.connection-right-body {
  width: 418px;
  height: 524px;
  background: #00b9ef;
  .right-title {
    font-weight: 800;
    font-size: 36px;
    color: #171a26;
  }
}
.contact-information {
  margin-top: 78px;
  img {
    width: 20px;
    height: 20px;
  }
}
.medium-list {
  margin-top: 105px;
}
.platform-icon {
  margin-right: 16px;
  img {
    width: 32px;
    height: 32px;
  }
}
.white {
  color: #fff;
}
.ml10 {
  margin-left: 10px;
}
.mt32 {
  margin-top: 32px;
}
.wd233 {
  width: 233px;
}
.connection-page {
  height: 100%;
  display: flex;
  flex-direction: column;
  .connection-wrap {
    background: #171a26;
    flex: 1;
    display: flex;
    align-items: center;
  }
  .connection-body {
    width: 940px;
    margin: 0 auto;
    padding-bottom: 100px;
    padding-top: 70px;
    height: 524px;
    .connection-left-body {
      width: 582px;
      height: 524px;
      background: url('@img/connection-banner.png') no-repeat;
      background-size: 100% 100%;
      .left-title {
        font-weight: 800;
        font-size: 36px;
        color: #00b9ef;
      }
    }
  }
}
</style>
